<template>
  <div class="hello">
    <input type="text" v-model="name">
    <h1>{{ msg }}</h1>
    <h1>{{ this.$store.state.count }}</h1>
    <h2>Essential Links</h2>
        <router-link to="/MyRouter">MyRouter</router-link>
    <router-link :to="first">First</router-link>
    <router-link :to="index">index</router-link>
     <a @click="next()" >前进</a>
     <a @click="pl()" >不同的url</a>
     <a @click="replace()" >替换的url</a>
      <router-view></router-view>
    <ul>
        <li>
        <a
          @click="todo()"
          href=""
          target="_blank"
        >
          Todo List
        </a>
      </li>

      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      name: '123',
      first: '/first',
      index: '/index'
    }
  },
  created () {
    if (this.name === 123) {
      this.reversed()
    }
    console.log('111')
  },
  methods: {
    beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
      next(vm => {
        // 通过 `vm` 访问组件实例
      })
    },
    beforeRouteUpdate (to, from, next) {
      // 在当前路由改变，但是该组件被复用时调用
      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
      next()
    },
    beforeRouteLeave (to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
      next()
    },

    pl () {
      let location = '/MyRouter/MySubRouter/111'
      this.$router.push(location)
    },
    replace () {
      let location = '/MyRouter'
      this.$router.replace(location)
    },
    next () {
      this.$router.go(1)
    },
    reversed () {
      console.log(this.name.split('').reverse().join(''))
    },
    todo () {
    // eslint-disable-next-line no-unused-expressions
      this.$router.todo
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
